<template>
  <div class="checkEarning">
    <div class="statisTitle">
      <p class="statisName">收益</p>
      <div id="earning"></div>
    </div>
    <div class="earningType">
      <div>
        <p>总收益</p>
        <p>0</p>
        <p>FIL</p>
      </div>
      <div>
        <p>昨日收益</p>
        <p>0</p>
        <p>FIL</p>
      </div>
      <div>
        <p>今日预估收益</p>
        <p>0</p>
        <p>FIL</p>
      </div>
    </div>
    <div>
      <p class="statisName">收益详情</p>
      <div class="tableList">
        <a-table :columns="columns" :data-source="data">
        </a-table>
        <a-button type="link" block style="text-align: right">
          查看更多>>
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import { yesterdayIncome } from '../serves/index'

  const columns = [
    {
      title: '日期',
      dataIndex: 'name',
      key: 'name',
      scopedSlots: {customRender: 'name'},
    },
    {
      title: '日平均算力',
      dataIndex: 'age',
      key: 'age',
      scopedSlots: {customRender: 'age'},
    },
    {
      title: 'FIL收益',
      dataIndex: 'address1',
      key: 'address1',
      ellipsis: true,
    },
    {
      title: '付款状态',
      dataIndex: 'address3',
      key: 'address3',
      ellipsis: true,
    }
  ]
  const data = []
  export default {
    name: "checkEarning",
    data() {
      return {
        columns,
        data,
        flag: true
      }
    },
    mounted() {
      // this.getEarningIncome()
      this.drawLine()
    },
    methods: {
      getEarningIncome() {
        yesterdayIncome().then(res => {
          console.log(res);
        })
      },
      drawLine() {
        let myChart = echarts.init(document.getElementById('earning'));
        let option = {
          color: ['#C060C2', '#FD51D9'],
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['FIL全网算力', 'FIL价格走势']
          },
          toolbox: {
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: '#000'
                }
              },
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'FIL/T',
              nameTextStyle: {
                color: '#000'
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#000'
                }
              },
              splitLine: {
                show: true
              }
            },
            {
              type: 'value',
              name: 'USDT',
              nameTextStyle: {
                color: '#000'
              },
              position: 'right',
              axisTick: {
                show: false
              },
              axisLabel: {
                textStyle: {
                  color: '#000'
                },
                formatter: '{value}'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: 'FIL全网算力',
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(192, 96, 194, 1)'
                }, {
                  offset: 1,
                  color: 'rgba(90, 99, 251, 1)'
                }])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 402, 231, 134, 190, 230, 120]
            },
            {
              name: 'FIL价格走势',
              type: 'line',
              smooth: true,
              yAxisIndex: 1,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(253,81,217)'
                }, {
                  offset: 1,
                  color: 'rgba(253, 81, 217, 0.17)'
                }])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 302, 181, 234, 210, 290, 150]
            }
          ]
        }
        myChart.setOption(option, true);
      },
    }
  }
</script>

<style lang="scss">
  .checkEarning {
    padding: 30px;
    margin: 0px 100px;

    .statisTitle {
      margin: 30px 0px;

      #earning {
        height: 350px;
        padding: 30px;
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
      }
    }

    .statisName {
      font-size: 24px;
      font-weight: 700;
      text-align: left;
    }

    .earningType {
      display: flex;
      justify-content: space-around;
      margin: 50px 0px;

      div {
        padding: 10px 20px;
        text-align: right;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        width: 300px;

        p {
          margin-bottom: 10px;
        }
      }

      div:nth-child(1) {
        background: linear-gradient(to right, #FEBB00 0%, #FE8700 100%);
      }

      div:nth-child(2) {
        background: linear-gradient(to right, #97E4FF 0%, #3BB9FE 100%);
      }

      div:nth-child(3) {
        background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
      }

    }

    .tableList {
      padding: 30px;
      box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);

      .ant-table-thead {
        tr {
          font-size: 20px;
        }
      }

      .ant-table-tbody {
        tr {
          font-size: 18px;
        }

        tr:nth-child(even) {
          background-color: #f1f2f1;
        }
      }

    }
  }

  @media screen and (max-width: 800px) {
    .checkEarning {
      padding: 10px;
      margin: 10px;

      .statisTitle {
        margin: 30px 0px;

        #earning {
          height: 250px;
          padding: 0px;
        }
      }

      .statisName {
        font-size: 16px;
      }

      .earningType {
        display: flex;
        justify-content: space-around;

        div {
          padding: 5px;
          margin: 5px;
          font-size: 14px;
        }
      }

      .tableList {
        padding: 10px;

        .ant-table-thead {
          tr {
            font-size: 12px;
          }

          th {
            padding: 5px;
          }
        }

        .ant-table-tbody {
          tr {
            font-size: 12px;
          }

          td {
            padding: 8px;
          }
        }

      }
    }
  }
</style>
